<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Any Other things should follow these 3 meta above -->
    <title>达米首页</title>
    <!-- Bootstrap -->
    <link href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/index.css" rel="stylesheet"/>
    <link href="/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet"/>
    <link href="/css/pop-up.css" rel="stylesheet" media="all"/>
    <!-- Custom styles -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/js/common/jquery-3.1.1.min.js"></script>
    <script src="/js/move.js"></script>
    <script src="/js/paopao.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/js/common/html5shiv.min.js"></script>
    <script src="/js/common/respond.min.js"></script>
    <![endif]-->

    <style>
        /* FontIcon begin */
        @font-face {
            font-family: 'iconfont';  /* project id 243659 */
            src: url('//at.alicdn.com/t/font_ylo0bcpo4l81if6r.eot');
            src: url('//at.alicdn.com/t/font_ylo0bcpo4l81if6r.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_ylo0bcpo4l81if6r.woff') format('woff'),
            url('//at.alicdn.com/t/font_ylo0bcpo4l81if6r.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_ylo0bcpo4l81if6r.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:"iconfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;}

        /* FontIcon End */
    </style>

</head>
<body>
<!-- this is the common top begin -->
<div class="container-fluid">
    <div data-th-replace="common_html/common_head"></div>
    <div class="row banner">
        <div class="col-xs-2 col-xs-2"></div>
        <div class="col-xs-9 col-xs-9">
            <div class="row">
                <div class="col-xs-3 logo"><img src="/img/cute_logo.jpg" class="logo_wh"/></div>
                <div class="col-xs-4 font-bold">
                    <!--<a class="mr-15 font-middle font-black" href="index.html">首页</a>-->
                    <!--<a class="mr-15 font-middle font-black" href="/seckill/">0元抢购</a>-->
                </div>
                <div class="col-xs-4">
                    <form class="form-inline" th:action="@{/product/searchGood}">
                        <div class="form-group">

                            <input type="text" class="form-control search" name="search" id="search" placeholder="请输入商品名\关键词"/>
                        </div>
                        <button type="submit"  class="search-btn">搜索</button>
                    </form>
                </div>
                <div class="col-xs-1">
                    <a href="/seckill/"><img src="/img/sale.png" class="sale-pic" style="margin-left: -90px"/></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- this is the common top end -->


<!-- 折叠二级菜单 begin -->
<div class="container-fluid mt-20">
    <div class="row">
        <div class="col-md-2" style="width: 200px">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active">
                    <a href="#"><i class="iconfont">&#xe696;</i>
                        商品分类</a>
                </li>
                <li>
                    <a href="#clothes" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont">&#xe7f1;</i>服装
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="clothes" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" th:href="@{/product/searchbykeyword/女上装}">女上装</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/女裤}">女裤</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/男上装}">男上装</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/男裤}">男裤</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/鞋包}">鞋包</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#sports" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont">&#xe6ea;</i>
                        运动
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="sports" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" th:href="@{/product/searchbykeyword/运动上衣}">运动上衣</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/运动裤}">运动裤</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/运动鞋}">运动鞋</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/运动器材}">运动器材</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#culture" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont">&#xe707;</i>
                        生活
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="culture" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" th:href="@{/product/searchbykeyword/植物}">植物</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/日用品}">日用品</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/杯子}">杯子</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#food" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont">&#xe760;</i>
                        文化
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="food" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" th:href="@{/product/searchbykeyword/明信片}">明信片</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/书籍}">书籍</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/文具}">文具</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/饰品}">饰品</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#life" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont">&#xe6f2;</i>
                        美食
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="life" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" th:href="@{/product/searchbykeyword/休闲零食}">休闲零食</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/饮品}">饮品</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/糕点}">糕点</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/辣条}">辣条</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#electronics" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont">&#xe704;</i>
                        电子
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="electronics" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" th:href="@{/product/searchbykeyword/台灯}">台灯</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/充电宝}">充电宝</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/耳机}">耳机</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/键盘}">键盘</a></li>
                        <li><a href="#" th:href="@{/product/searchbykeyword/充电线}">充电线</a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <div class="col-md-8">
            <div class="container">
                <div class="row line-three">
                    <div class="col-xs-12 col-xs-12">
                        <div class="carousel slide" id="carousel-1">
                            <ol class="carousel-indicators">
                                <li class="active" data-slide-to="0" data-target="#carousel-1">
                                </li>
                                <li data-slide-to="1" data-target="#carousel-1">
                                </li>
                                <li data-slide-to="2" data-target="#carousel-1">
                                </li>
                            </ol>
                            <div class="carousel-inner">
                                <th:block th:each="one,iterStatus:${top}">
                                    <th:block th:if="${iterStatus.count} eq 1">
                                        <div class="item active">
                                            <a>
                                                <img style="width: 1250px;height: 440px;" alt="" th:src="@{'/picture/'+${one.pictureId}}" src="http://images.huanqiu.com/sarons/2013/11/6e4fe63f9b455d1dfc94569ada25d790.jpg" />
                                            </a>
                                            <div class="carousel-caption">
                                                <h4 th:text="${one.title}">
                                                    焦点图二
                                                </h4>
                                                <p th:text="${one.description}">
                                                    焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,
                                                </p>
                                            </div>
                                        </div>
                                    </th:block>
                                    <th:block th:if="${iterStatus.count} neq 1">
                                        <div class="item">
                                            <img style="width: 1250px;height: 440px;" alt="" th:src="@{'/picture/'+${one.pictureId}}" src="http://images.huanqiu.com/sarons/2013/11/6e4fe63f9b455d1dfc94569ada25d790.jpg" />
                                            <div class="carousel-caption">
                                                <h4 th:text="${one.title}">
                                                    焦点图二
                                                </h4>
                                                <p th:text="${one.description}">
                                                    焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,
                                                </p>
                                            </div>
                                        </div>
                                    </th:block>
                                </th:block>
                            </div> <a rel="nofollow" class="left carousel-control" href="#carousel-1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a rel="nofollow" class="right carousel-control" href="#carousel-1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                        </div>
                    </div>
                </div>



                <div class="row mt-60 border-one index-products font-small text-center">
                    <div class="row">
                        <div class="col-xs-12">
                            <h5 class="font-bold font-middle">新品图片</h5>
                            <hr color="grey" style="height: 3px;"/>
                        </div>
                    </div>
                    <div class="rotate col-xs-4 mb-5" th:each="one,iterStatus:${newProducts}">
                        <a th:href="@{'/product/product_detail/'+${one.id}}"><img th:alt="${one.name}" th:src="@{'/picture/'+${one.pictureId}}" /></a><br/>
                        <a class="font-15" th:href="@{'/product/product_detail/'+${one.id}}" th:text="${one.name}"></a>
                    </div>
                </div>

                <div class="row mt-60 border-one index-products font-small text-center">
                    <div class="row">
                        <div class="col-xs-12">
                            <h5 class="font-bold font-middle">低价销售</h5>
                            <hr color="grey" style="height: 3px;"/>
                        </div>
                    </div>
                    <div class="reflection col-xs-4 mb-5" th:each="one,iterStatus:${cheapProducts}">
                        <a th:href="@{'/product/product_detail/'+${one.id}}"><img th:alt="${one.name}" th:src="@{'/picture/'+${one.pictureId}}" /></a><br/>
                        <a class="font-15" th:href="@{'/product/product_detail/'+${one.id}}" th:text="${one.name}"></a>
                    </div>
                </div>
                <!-- 3d轮播效果图 Beginning -->
                <div class="row mt-20">
                    <div class="col-xs-12 products-show">
                        <div class="col-xs-2"></div>
                        <div class="col-xs-8">
                            <div class="picture_3d">
                                <ul id="detail_3d" class="detail_3d">
                                    <li><a href="#" class="target"></a></li>
                                    <li><a href="#" class="target"></a></li>
                                    <li><a href="#" class="target"></a></li>
                                    <li><a href="#" class="target"></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xs-2"></div>
                    </div>
                </div>
                <!-- 3d轮播效果图 Ending -->
                <!--测试气泡-->
                <div class="bubble">
                    <div>
                        <img src="/images/bubble1.png" alt="气泡" class="bubble1"/>
                        <i><img src="/images/bubble1.jpg" alt="图片" class="bubble2"/></i>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-nd-2"></div>
    </div>

    <!-- 折叠二级菜单 end -->


    <!--This is the common footer Begin-->
    <div class="container-fluid mt-20">
        <div class="row">
            <div class="col-xs-12 footer-info">
                <div class="col-xs-2 col-xs-offset-3 mt-40 "><img src="/img/logo_button_1.jpg"/></div>
                <div class="col-xs-3 mt-40 "><img src="/img/logo_button_2.jpg " /><br/><span class="font-grey font-15" >一家专门做校园文化产品的网站</span></div>
                <div class="col-xs-4 mt-60"><img class="qr-code"  src="/img/qr_code.png" th:src="@{'/picture/72'}"/><br/><div class="mt-20 font-15 ml-10">扫码有惊喜哦</div></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row mt-20 font-small">
            <div class="col-xs-2 col-xs-2"></div>
            <div class="col-xs-8 col-xs-8">
                <div id="footer">
                    <div class="footerNav text-center">
                        <a href="#" th:href="@{/demo/aboutUs}">关于我们</a> |
                        <a href="#" th:href="@{/demo/service}">服务条款</a> |
                        <a href="#" th:href="@{/demo/map}">网站地图</a> |
                        <a href="#" th:href="@{/demo/contactUs}">联系我们</a>
                    </div>
                    <div class="copyRight text-center">
                        Copyright DaMi
                    </div>
                </div>
            </div>
            <div class="col-xs-2"></div>
        </div>
    </div>
</div>

<script src="/js/login.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/


    var isShowLogin = /*[[${showLogin}]]*/ 'Sebastian';
    if(isShowLogin){
        $('.theme-logIn').click();
    }

    /*]]>*/
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
<!--This is the common footer End-->